﻿.stocks section[role="main"] {
    -ms-grid-row: 2;
    display: -ms-grid;
    -ms-grid-columns: 120px 1fr 200px;
    -ms-grid-rows: 1fr 120px;
}

.stocks #chart, .stocks #chartLayoutRoot {
    -ms-grid-column: 2;
    -ms-grid-row: 1;
}

.stocks #chartLayoutRoot {
    margin-right: 10px;
}

.stocks #state {
    -ms-grid-column: 2;
    -ms-grid-row: 1;
    color: yellow;
}

.stocks section[role="directory"] {
    -ms-grid-column: 2;
    -ms-grid-row: 2;
    -ms-grid-rows: 1fr 100px;
    display: -ms-grid;
}

.stocks #legend {
    height: 100%;
    -ms-grid-column: 3;
}

.stocks .legendItem {
    width: 80px;
    padding: 1em;
    color: black;
    font-weight: bold;
}

.stocks #selectedSymbol {
    height: 100%;
    width: 100%;
    -ms-grid-row: 2;
    -ms-grid-column-span: 3;
}

.stocks .selectedItem {
    width: 250px;
    font-weight: bold;
}
